<template>
<div>
<vxe-grid
    v-bind="gridOptions"
    ref="xGrid2"

>
  <template v-for="(item,index) in props.tableColumn" :key="index" #[getSolt(item)]="{ row }">
    <!--具名插槽-->
    <slot :name="item.field" :row="row"></slot>
  </template>
  <template #pager>
    <vxe-pager
        :layouts="tablePage.layout"
        v-model:current-page="tablePage.currentPage"
        v-model:page-size="tablePage.pageSize"
        :total="tablePage.total"
        :page-sizes="tablePage.pageSizes"
        :auto-hidden="tablePage.autoHidden"
        :tree-config="gridOptions.treeConfig"
        @page-change="handlePageChange">
    </vxe-pager>
  </template>
</vxe-grid>
</div>
</template>
<script setup>
import {computed, getCurrentInstance, onMounted, reactive, toRefs, watchEffect} from "vue";
import { VXETable } from 'vxe-table'
defineOptions({
  name:"vxetable2"
})
const props = defineProps({
  checkbox: {
    type: Boolean,
    default: false
  },
  radio: {
    type: Boolean,
    default: false
  },
  seq: {
    type: Boolean,
    default: false
  },
  tableData: {
    type: Array,
    default: () => []
  },
  tableColumn: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false,
  },
  isPage: {
    type: Boolean,
    default: false,
  },
  total: {
    type: Number,
    default: 0,
  },
  // 当前页数
  pageNum: {
    type: Number,
    default: 1,
  },
  // 每页条数
  pageSize: {
    type: Number,
    default: 5,
  },
  // 是否开启树形结构
  OpenTree: {
    type: Boolean,
    default: false,
  },
  treeNodeNum: {
    type: Number,
    default: 0,
  },
  treeConfig: {
    type: Object,
    default: () => ({
      transform: true,
      rowField: "menuId",
      parentField: "parentId",
      // 用于标识一个字段来赋予子节点参数
      // childrenField:"children"
      expandAll: false
    })
  },
  defaultSort: {
    type: Object,
    default: () => ({
      field: '',
      order: 'desc',
    })
  }
})
const $emit = defineEmits(['checkbox-all', 'checkbox-change', 'radio-change', 'PageChange', 'update:pageNum', 'update:pageSize']);
const {proxy} = getCurrentInstance();
// 更新页数
const currentPage = computed({
  get() {
    return props.pageNum
  },
  set(val) {
    // 不知道什么原理分页的时候要这样计算属性的写
    $emit('update:pageNum', val)
  }
})
const pageSize = computed({
  get() {
    return props.pageSize
  },
  set(val) {
    // 不知道什么原理分页的时候要这样计算属性的写
    $emit('update:pageSize', val)
  }
})
const {tableData, tableColumn, checkbox, radio, loading, total,seq} = toRefs(props);
const gridOptions = reactive({
  border: false,
  // height: 300,
  align: "center",
  loading: true,
  columnConfig: {
    resizable: true
  },
  columns: [
    {type: 'seq', width: 50},

  ],
  // 复选框配置
  checkboxConfig: {
    highlight: true,
    // reserve: true,
    isShiftKey: true,
    range: true,
  },
  // toolbarConfig: {
  //   slots: {
  //     buttons: 'toolbar_buttons'
  //   }
  // },
  data: [],
  //右键菜单
  menuConfig: {
    header: {
      options: [
        [
          {code: "FIXED_LEFT_COLUMN", name: "固定到左侧"},
          {code: "FIXED_LEFT_COLUMN_ALL", name: "固定左侧所有列"},
          {code: "FIXED_RIGHT_COLUMN", name: "固定到右侧"},
          {code: "FIXED_RIGHT_COLUMN_ALL", name: "固定右侧所有列"},
          {code: "CLEAR_FIXED_COLUMN", name: "取消固定"},
          {code: "CLEAR_FIXED_COLUMN_ALL", name: "取消全部固定"},
          {code: "FIND_DATA", name: "定位"},
          {code: "FIND_DW", name: "取消排序"},
        ],
      ],
    },
    body: {
      options: [
        [{code: "COPY", name: "复制"}],
        [{code: "DW", name: "定位"}],
      ],
    },

  },
})
const tablePage = reactive({
  layout: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
  autoHidden: false,
  pageSizes: [1, 2, 6, 10],
  total: total,
  currentPage: currentPage,
  pageSize: pageSize
})


watchEffect(() => {
  initTable()
  initColumns()
})
onMounted(() => {
  console.log()
  initTable()
  initColumns()
})
// 加载处理表格数据
function initTable() {
  gridOptions.loading = loading.value
  gridOptions.data = tableData.value
}
//处理加载的配置数据
function initColumns() {
  gridOptions.columns = []
  gridOptions.columns = tableColumn.value.map((item) => {
    if (item.slot) {
      let slots = {}
      slots.default = getSolt(item)
      item.slots = slots
    }

    return {
      ...item,
      useKey: item.field,


    };
  })
  // 1，如果（单选，复选）都存在默认单选，否则各选各的
  if (radio.value && checkbox.value) {
    gridOptions.columns.unshift({type: 'radio', width: 60})
  } else if (radio.value) {
    gridOptions.columns.unshift({type: 'radio', width: 60})
  } else if (checkbox.value) {
    gridOptions.columns.unshift({type: 'checkbox', width: 60})
  }
  if(seq.value){
    gridOptions.columns.unshift({title: '序号',type: 'seq', width: 50})
  }
}
// 插槽用来添加是否有solt
function getSolt(val) {
  return val.field + "_default";
}

// 分页事件改变
function handlePageChange({currentPage, pageSize}) {
  console.log(currentPage, pageSize, 'currentPage, pageSize')
  $emit('PageChange', {pageNum: currentPage, pageSize: pageSize})
  // currentPage.value = currentPage
  // pageSize.value = pageSize

}

</script>
<style scoped lang="scss">

</style>
